<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>积分折扣${goods.integCur_i}</title>
		<!-- amazeui -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/ui/css/amazeui.min.css" />
		<!-- lib -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/swiper/css/swiper.min.css" />
		<!-- app -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/ui.css" />
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/header.css"/>
        <!-- 商品列表样式 -->
       	<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/goodlist.css"/>
	</head>
	<body>
		<div class="container">
			<header>
				<div class="header">
					<a  href="${BASE_PATH}/index"><span class="back"></span></a>
					<a href="${BASE_PATH}/index"><span class="logo_pic"></span></a>
					<span class="logo_texts">OK 妈咪</span>
				</div>
				<div class="conter">
					<div class="fen">
						<span class="fen_tital">我的积分<%-- <img class="jifen_img" src="${BASE_PATH}/static/app/img/keyongjifen.png"/> --%></span>
						
						<ul>
							<li><i class="goods">${sppoint }</i><span>商品积分</span></li>
							<li><i class="health">${jkpoint }</i><span>健康积分</span></li>
							<li><i class="educate">${jypoint }</i><span>教育积分</span></li>
						</ul>
					</div>
				</div>	
			</header>
			
			<div class="conter">
				<div class="choose">
					<ul>
						<li id="1" class="<c:if test="${paytype==1}">on</c:if>">
							<a href="${BASE_PATH}/goods/list?paytype=1&kind=${kind}&type=${type}">全部</a>
						</li>
						<li id="2" class="<c:if test="${paytype==2}">on</c:if>">
							<a href="${BASE_PATH}/goods/list?paytype=2&kind=${kind}&type=${type}">商品积分</a>
						</li>
						<li id="3" class="<c:if test="${paytype==3}">on</c:if>">
							<a href="${BASE_PATH}/goods/list?paytype=3&kind=${kind}&type=${type}">健康积分</a>
						</li>
						<li id="4" class="<c:if test="${paytype==4}">on</c:if>">
							<a href="${BASE_PATH}/goods/list?paytype=4&kind=${kind}&type=${type}">教育积分</a>
						</li>
						<li class="choose-on"><i></i></li>
					</ul>
				</div>
				<!-- 排序 -->
				<div class="search-warp">	
					<div class="searchQuery">
					   <div class="sort">
					      <h4>排序</h4>
					      <P><a href="javascript:" <c:if test="${kind==1}">id="sortOn"</c:if> class="moren1 moren">销量优先排序<i class="queue"></i></a></P>
					       <P>
					         <a href="javascript:" <c:if test="${kind==2}">id="sortOn"</c:if> class="moren2 moren">兑换积分升序<i class="queue"></i></a>
					         <a href="javascript:" <c:if test="${kind==3}">id="sortOn"</c:if> class="moren3 moren">兑换积分降序<i class="queue"></i></a>
					       </P>
					   </div>
					    <div class="price-section">
					      <h4>价格区间</h4>
					      <P>
					         <input type="text" placeholder="最低值" id="minPrice" class="sort-condition">
					         <span>——</span>
					         <input type="text" placeholder="最高值" id="maxPrice" class="sort-condition">
					      </P>
					      
					       <h4 style="margin-top:0;">积分区间</h4>
					      <P>
					         <input type="text" placeholder="最低值" id="minIntegral" class="sort-condition">
					         <span>——</span>
					         <input type="text" placeholder="最高值" id="maxIntegral" class="sort-condition">
					      </P>
					    </div>
					    <div class="price-section-btn">
					     <span id="priceReset">重置</span><span id="priceBtn">完成</span>
					    </div>				   
	 				</div>
 				</div>
				<div class="neirong">
					<div id="all" class="neirong_list">
					</div>
					<div id="goods" class="neirong_list">
					</div>
					<div id="educate" class="neirong_list">
					</div>
				</div>
				<div class="container showw am-g app-goods-list " id="goodsList"></div>
				</div>
			</div>
		</div>
				<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
					<a href="#top"><span class="am-gotop-title">回到顶部</span><i class="am-gotop-icon am-icon-chevron-up"></i></a>
				</div>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<!-- amazeui -->
		<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/swiper/js/swiper.jquery.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/template/template.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-lazyload/jquery.lazyload.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-marquee/jquery.marquee.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
		<script type="text/javascript">
		var width = $(".list_box img").width();
		$(".list_box img").height(width);
		var pageNum = 0,totalPage = 1,loading = false,paytype = '${empty paytype?0:paytype}';
		$(function(){
		 
			//绑定“加载中”进入加载事件
			Kit.util.onPageEnd(function(){
               	if(pageNum < totalPage && !loading){
               		loading = true;
               		$("#goodsList").append("<div class=\"app-loading\">正在加载</div>");
               		Kit.ajax.post("${BASE_PATH}/goods/jfPage",{pageNum:pageNum+1,pageSize:10,paytype:'${paytype}',type:'${type}',kind:'${kind}',minPrice:'${minPrice}',maxPrice:'${maxPrice}',minIntegral:'${minIntegral}',maxIntegral:'${maxIntegral}'},function(result){
						$("#goodsList").append(template("dataTpl",result.object));
						//amazeui要求在最后一个元素上添加am-u-end样式，否则默认为右浮动
						$(".app-goods-item","#goodsList").removeClass("am-u-end").last().addClass("am-u-end");
						//图片延迟加载
						$("img.lazyload","#goodsList").not(".lazyload-binded").lazyload({
							failurelimit : 100,
							effect : "show"
						}).addClass("lazyload-binded");
						$(".app-loading","#goodsList").remove();
						pageNum = result.object.pageNumber;
						totalPage = result.object.totalPage;
						//重置加载标识
						loading = false;
					});
               	}
			});
		 
			if(paytype == 1){
				$("#all").show().siblings().hide();
			}else if(paytype == 2){
				$("#goods").show().siblings().hide();
			}else if(paytype == 3){
				$("#health").show().siblings().hide();
			}else if(paytype == 4){
				$("#educate").show().siblings().hide();
			}
		});

		//显示与隐藏搜索条件
		(function(){			
			var box=document.querySelector(".search-warp");
			var btn=document.querySelector(".choose-on i");  
			var conter=document.querySelector(".conter");
			box.style.display="none";
			btn.onclick=function(){
				if(box.style.display=="none"){
					box.style.display="block";
					box.style.zIndex="999";
					this.style.backgroundImage="url('${BASE_PATH}/static/app/img/201801181015 (1).png')";
					this.style.repeat="no-repeat";
					this.style.backgroundSize="cover";
				}else{
					box.style.display="none";
					box.style.zIndex="-999";
					this.style.backgroundImage="url('${BASE_PATH}/static/app/img/201801181015 (3).png')";
					this.style.repeat="no-repeat";
					this.style.backgroundSize="cover";
				}
			}
		//按价格搜索商品
		var moren=document.querySelectorAll(".moren"); 
		var queue=document.querySelectorAll(".queue");
		var priceBtn=document.querySelector("#priceBtn");
	    var pattern=/^\d{0,8}\.{0,1}(\d{1,2})?$/;
	    var paytype="${paytype}";
	    var type="${type}";
	    var kind="${kind}";
	    var  SminPrice=document.querySelector("#minPrice"),
			 SmaxPrice=document.querySelector("#maxPrice"),
			 SminIntegral=document.querySelector("#minIntegral"),
			 SmaxIntegral=document.querySelector("#maxIntegral");

	    //进入页面点亮排序图标
        kindOn();
        function kindOn(){
        	if(kind==1){
                replace("moren"+kind);
    		}else if(kind==2){
    			 replace("moren"+kind);
    		}else{
    			replace("moren"+kind);
    		}
        }
        //点击排序时格式化样式
		for(var i=0;i<moren.length;i++){
		  moren[i].onclick=function(){
			  removeAttribute(moren, "id");
			  removeAttribute(queue, "style");
			}
		}
		//点击排序选中样式	
		$(".moren1").click(function(){
			kind=1;
			$(".moren1").attr("id","sortOn");
			this.getElementsByTagName("i")[0].style.backgroundImage="url('${BASE_PATH}/static/app/img/201806091030.png')";
		});
		$(".moren2").click(function(){
			kind=2;	
			$(".moren2").attr("id","sortOn");
			this.getElementsByTagName("i")[0].style.backgroundImage="url('${BASE_PATH}/static/app/img/201806091059.png')";		
		});
		$(".moren3").click(function(){
			kind=3;
			$(".moren3").attr("id","sortOn");
			this.getElementsByTagName("i")[0].style.backgroundImage="url('${BASE_PATH}/static/app/img/201806091059.png')";
			this.getElementsByTagName("i")[0].style.transform="rotateX(180deg)";
		});
		//清空重置
	    priceReset.onclick=function(){
	    	kind=1;
	    	removeAttribute(moren, "id");//移除添加的Id
	    	removeAttribute(queue, "style");//移除添加的style样式
	    	kindOn();
	    	$(".moren1").attr("id","sortOn");
			SminIntegral.value="";
	    	SmaxIntegral.value="";
	    }
		//点击搜索
		priceBtn.onclick=function(){	
		var	 minPrice="",
			 maxPrice="",			
			 minIntegral="",
			 maxIntegral="";
		
		//正则验证
		 if(SminPrice || SmaxPrice){
			if(SminPrice.value!=""&&pattern.test(SminPrice.value)){  
				minPrice=SminPrice.value;  
	         }else{  
	        	 SminPrice.value="";//初始化为空        	
	         }
			if(SmaxPrice.value!=""&&pattern.test(SmaxPrice.value)){  
				maxPrice=SmaxPrice.value;  
	         }else{  
	        	 SmaxPrice.value="";//初始化为空        	
	         } 
	         
		}
		  if(SminIntegral || SmaxIntegral){
			//验证积分
			  if(SminIntegral.value!=""&&pattern.test(SminIntegral.value)){  
				 minIntegral=SminIntegral.value;  //最小积分
	         }else{  
	        	 SminIntegral.value="";//初始化为空        	
	         } 
			 if(SmaxIntegral.value!=""&&pattern.test(SmaxIntegral.value)){  
				 maxIntegral=SmaxIntegral.value;    //最大积分
	         }else{  
	        	 SmaxIntegral.value="";//初始化为空        	
	         }  
			 
		 } 

	         console.log(minIntegral+"：输入的最小价格");
	         console.log(maxIntegral+"：输入的最高价格");
			
			location.href="${BASE_PATH}/goods/list?kind="+kind+"&paytype="+paytype+"&type="+type+"&minPrice="+minPrice+"&maxPrice="+maxPrice+"&minIntegral="+minIntegral+"&maxIntegral="+maxIntegral;
		}
		
		})()
		/*
		 * 循环移除元素属性
		 */		
		function removeAttribute(obj, attribute) {
			for(var i = 0; i < obj.length; i++) {
				obj[i].removeAttribute(attribute);
			}
		}
		
		/*
		 * 进入页面点亮排序方法
		 */		
		function replace(obj) {
			if(obj!="moren1"){
				 if(obj=="moren2"){
					document.getElementsByClassName("moren2")[0].getElementsByTagName("i")[0].style.backgroundImage="url('${BASE_PATH}/static/app/img/201806091059.png')";
                 } else{
                	 document.getElementsByClassName("moren3")[0].getElementsByTagName("i")[0].style.backgroundImage="url('${BASE_PATH}/static/app/img/201806091059.png')";
                	 document.getElementsByClassName("moren3")[0].getElementsByTagName("i")[0].style.transform="rotateX(180deg)";
                }				
			}else{
				document.getElementsByClassName(obj)[0].getElementsByTagName("i")[0].style.backgroundImage="url('${BASE_PATH}/static/app/img/201806091030.png')";
			  }
			}
		/*
		*软键盘弹出处理
		*/
		(function(){
			var condition=document.querySelectorAll(".sort-condition");
			var searchQuery=document.querySelector(".searchQuery");
			for(i=0;i<condition.length;i++){
				condition[i].onfocus=function(){
					searchQuery.className="searchQuery searchQueryTop";
				}
				condition[i].onblur=function(){
					searchQuery.className="searchQuery ";
				}
			}			
		})()
		</script>
			<!-- tpl -->
		<script type="text/html" id="dataTpl">
			{{each list as goods index}}
					<a href="${BASE_PATH}/goods/jfdetail/{{goods.id}}?type=3">
						<div class="list_box am-u-md-4 am-u-lg-3 app-goods-item">
							<img src="${FTP_PATH}{{goods.thumb}}"  onerror="src='${BASE_PATH}/static/app/img/model.png';"/>
							<span class="goods_name">{{goods.name}}</span>
							<div class="price-salesVolume">
                                <span class="price">¥{{goods.marketPrice}}{{goods.marketSpecPrice}}<i class="line"></i></span>
                                <span class="salesVolume">销量 {{goods.saleCount}}</span>
                            </div>
							<span class="jifen">
							{{if goods.integCur_iType==1}}
							商品积分
							{{else if goods.integCur_iType==2}}
							健康积分
							{{else if goods.integCur_iType==3}}
							教育积分
							{{/if}}							
							{{goods.integCur_i}} + ¥ {{goods.integCur_c}}											
                            </span>
						</div>
					</a>
			{{/each}}
		</script>
	</body>
</html>